<template>
  <PageWrapper title="富文本组件示例 https://www.wangeditor.com/">
    <div style="border: 1px solid #ccc; z-index: 10000">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @on-created="handleCreated"
        @on-change="handleChange"
        @on-destroyed="handleDestroyed"
        @on-focus="handleFocus"
        @on-blur="handleBlur"
        @custom-alert="customAlert"
        @custom-paste="customPaste"
      />
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from "/@/components/Page"
  import { useMessage } from "/@/hooks/web/useMessage"
  import "@wangeditor/editor/dist/css/style.css" // 引入 css

  import { onBeforeUnmount, ref, reactive, shallowRef, onMounted } from "vue"
  import { Editor, Toolbar } from "@wangeditor/editor-for-vue"

  const { createMessage } = useMessage()

  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef()

  // 内容 HTML
  const valueHtml = ref("<p>hello</p>")

  const mode = ref("default") // 或 'simple'

  // 模拟 ajax 异步获取内容
  onMounted(() => {
    setTimeout(() => {
      valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>"
    }, 1500)
  })

  const toolbarConfig = ref({})

  //自定义上传图片
  const uploadImg = (file, insertFn) => {
    let imgData = new FormData()
    console.log(file)
    imgData.append("file", file)

    // 插入后端返回的url
    insertFn("https://tse4-mm.cn.bing.net/th/id/OIP-C.7KW5GT7NQ8yUGlBbCHEm0gHaNK?pid=ImgDet&rs=1")
  }

  // 自定义插入图片
  const insertImg = (file) => {
    console.log(file)
  }

  const editorConfig = reactive({
    placeholder: "请输入内容...",
    // 所有的菜单配置，都要在 MENU_CONF 属性下
    MENU_CONF: {
      //配置上传图片
      uploadImage: {
        // 自定义上传图片 方法
        customUpload: uploadImg,
        // 自定义插入图片 方法
        customInsert: insertImg,
        //server必须要配置正确,我这里因为上传图片有点特殊，在上面方法配置了，所以此处不用配置地址
        // server: 'https://xwbdzzz.haiyan.gov.cn:10002/form/temp/update/ajax/img',

        maxFileSize: 4 * 1024 * 1024, // 1M
        // 最多可上传几个文件，默认为 100
        maxNumberOfFiles: 100,
        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        allowedFileTypes: [],
        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
        fieldName: "file",
        meta: {
          //官网中把token放到了这里，但是请求的时候会看不到token
        },
        headers: {
          // 所以token放这里
          // token: window.sessionStorage.token,
        },
        // 将 meta 拼接到 url 参数中，默认 false
        metaWithUrl: false,
        // 跨域是否传递 cookie ，默认为 false
        withCredentials: false,
        // 超时时间，默认为 10 秒
        timeout: 5 * 1000, // 5 秒

        // 上传之前触发
        // onBeforeUpload(file) {
        //   console.log(file);    // JS 语法
        //     // file 选中的文件，格式如 { key: file }
        //     return file

        //     // 可以 return
        //     // 1. return file 或者 new 一个 file ，接下来将上传
        //     // 2. return false ，不上传这个 file
        // },

        // // 上传进度的回调函数

        // onProgress(progress) {       // JS 语法
        //     // progress 是 0-100 的数字
        //     console.log('progress', progress)
        // },

        // // 单个文件上传成功之后

        // onSuccess(file, res) {          // JS 语法
        //     console.log(`${file.name} 上传成功`, res)
        // },

        // // 单个文件上传失败
        // onFailed(file, res) {           // JS 语法
        //     console.log(`${file.name} 上传失败`, res)
        // },

        // // 上传错误，或者触发 timeout 超时

        // onError(file, err, res) {               // JS 语法
        //     console.log(`${file.name} 上传出错`, err, res)
        // },
      },
      // 配置上传视频（同上传图片）
      uploadVideo: {},
    },
  })

  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })

  // 编辑器回调函数
  const handleCreated = (editor) => {
    console.log("created", editor)
    editorRef.value = editor // 记录 editor 实例，重要！
  }
  const handleChange = (editor) => {
    console.log("change:", editor.getHtml())
  }
  const handleDestroyed = (editor) => {
    console.log("destroyed", editor)
  }
  const handleFocus = (editor) => {
    console.log("focus", editor)
  }
  const handleBlur = (editor) => {
    console.log("blur", editor)
  }
  const customAlert = (info, type) => {
    createMessage.warning(`【自定义提示】${type} - ${info}`)
  }
  const customPaste = (editor, event, callback) => {
    console.log("ClipboardEvent 粘贴事件对象", event)

    // 自定义插入内容
    editor.insertText("xxx")

    // 返回值（注意，vue 事件的返回值，不能用 return）
    callback(false) // 返回 false ，阻止默认粘贴行为
    // callback(true) // 返回 true ，继续默认的粘贴行为
  }
</script>

<style></style>
